<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4" style="margin-top: 50px;">
        <el-tree
          ref="myFilter"
          :data="filterData"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[1, 2]"
          :default-checked-keys="[]"
          :props="defaultProps"
          @check="filterChange"
        />
      </el-col>
      <el-col :span="20">
        <full-calendar :events="fcEvents" :lang="'zh'" @eventClick="eventClick" @changeMonth="changeMonth" />
      </el-col>
    </el-row>

    <contract-detail ref="contractDetailRef" :dialog-status="'update'" @handleChild="handleChild" />
  </div>
</template>
<style>
  .events-day {
    min-height: 100px!important;
  }
  .is-selected {
    color: #1989FA;
  }
  .common_event {
    background-color: #1989FA!important;
    color: white!important;
  }
  .common_event2 {
    background-color: #46B2ED!important;
    color: white!important;
  }
  .common_event3 {
    background-color: #22E39C !important;
    color: white!important;
  }
  .ok_event {
    background-color: #33B679 !important;
    color: white!important;
  }
</style>
<script>

import { postAction } from '@/api/manage'
import contractDetail from '@/views/purchase/contract/contractDetail'
import fullCalendar from 'vue-fullcalendar'
import { getCurMonth } from '@/utils/date-util'

export default {
  name: 'PurchaseCalendar',
  components: {
    fullCalendar,
    contractDetail
  },
  data() {
    return {
      filterData: [{
        id: 2,
        label: '付款状态',
        children: [
          {
            id: 5,
            label: '无'
          },
          {
            id: 6,
            label: '待付款'
          }, {
            id: 7,
            label: '待报销'
          }, {
            id: 8,
            label: '已完成'
          }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentMonth: [],
      stateFilter: { paymentSituation: ['无', '待付款', '待报销'] },
      fcEvents: [{
        title: '222',
        start: '2020-07-22',
        // end: '2020-07-23',
        cssClass: 'common_event',
        yourData: {}
      }],
      config: {
        defaultView: 'month',
        eventRender: function(event, element) {
          console.log(event)
        }
      }
    }
  },
  beforeCreate() {

  },
  created() {
    setTimeout(() => {
      this.$refs.myFilter.setCheckedKeys([5, 6, 7])
      this.transFilter([5, 6, 7])
    }, 100)
  },
  methods: {
    filterChange(obj, checkState) {
      this.transFilter(checkState.checkedKeys)
      this.loadCalendarInfo()
    },
    transFilter(keys) {
      const param = { paymentSituation: [] }
      for (var i in keys) {
        switch (keys[i]) {
          case 5:
            param.paymentSituation.push('无')
            break
          case 6:
            param.paymentSituation.push('待付款')
            break
          case 7:
            param.paymentSituation.push('待报销')
            break
          case 8:
            param.paymentSituation.push('已完成')
            break
          case 2:
          default:
        }
      }
      this.stateFilter = param
      return param
    },
    handleChild(data) {
      const fns = {
        contractUpdated() {
          this.loadCalendarInfo()
        }
      }
      return fns[data.type] && fns[data.type].call(this)
    },
    eventClick(day, jsEvent) {
      this.$refs.contractDetailRef.show(day.yourData.contractId)
    },
    changeMonth(start, end, currentStart) {
      this.currentMonth = getCurMonth(currentStart)
      this.loadCalendarInfo()
    },
    getPaymentEventCss(paymentSituation) {
      switch (paymentSituation) {
        case '已完成':
          return 'ok_event'
        case '待报销':
          return 'common_event3'
        case '待付款':
          return 'common_event2'
        default:
          return 'common_event'
      }
    },
    loadCalendarInfo() {
      const param = { startDate: this.currentMonth[0],
        endDate: this.currentMonth[1],
        paymentSituation: this.stateFilter.paymentSituation
      }
      postAction('purchase/calendar/content', param).then(res => {
        const { data } = res
        const evs = []
        if (data !== null && data !== undefined) {
          for (var date in data) {
            for (var i = 0, len = data[date].length; i < len; i++) {
              var paymentSituation = data[date][i].contentObj.paymentSituation
              evs.push({
                title: data[date][i].digest,
                start: date,
                // end: '2020-07- 23',
                cssClass: this.getPaymentEventCss(paymentSituation),
                yourData: data[date][i].contentObj
              })
            }
          }
          this.fcEvents = evs
        }
      })
    }
  }
}
</script>
